<template>
  <a-upload
    v-model:fileList="fileList"
    :name="name"
    :multiple="multiple"
    :draggable="draggable"
    :action="`${BASE_URL}${url}`"
    @drop="handleDrop"
    :directory="directory"
    @success="success"
    :show-file-list="showFileList"
    :accept="accept"
    class="h-full"
    :headers="{
      Authorization: getToken(),
      data: data
    }"
  >
    <template #upload-button>
      <slot>
        <div class="text-center">
          <div class="text-[2rem] w-full">
            <icon-upload />
          </div>
          <div>{{ t["文件上传"] }}</div>
        </div>
      </slot>
      <a-divider></a-divider>
      <div class="w-full text-center text-gray-300">
        <div class="flex justify-between">
          <div>{{ t["允许拖拽上传"] }}</div>
          <IconCheck v-if="draggable" class="text-green-500" />
          <IconClose v-else />
        </div>
        <div class="flex justify-between">
          <span>{{ t["允许多文件"] }}</span>
          <IconCheck v-if="multiple" />
          <IconClose v-else />
        </div>
        <div class="flex justify-between">
          <span>{{ t["允许上传文件夹"] }}</span>
          <IconCheck v-if="directory" />
          <IconClose v-else />
        </div>
      </div>
    </template>
  </a-upload>
</template>
<script lang="ts" setup>
import { getBaseUrl } from "@/api/config/request";
import { getToken } from "@/store/modules/user/utils";
import { FileItem } from "@arco-design/web-vue";
import { IconCheck, IconClose } from "@arco-design/web-vue/es/icon";

const fileList = ref([]);

const emit = defineEmits(["success"]);
const BASE_URL = ref(getBaseUrl());

const uploadURL = `/v2/sys/api/upload`;

const t = translate("公共模块");

withDefaults(
  defineProps<{
    url?: string;
    accept?: string;
    name?: string;
    directory?: boolean;
    draggable?: boolean;
    multiple?: boolean;
    showFileList?: boolean;
    data?: any;
  }>(),
  {
    url: uploadURL,
    name: "file",
    draggable: true
  }
);
const success = (fileItem: FileItem) => {
  emit("success", fileItem);
};
function handleDrop(e: DragEvent) {}
</script>
